<script setup>
import {reactive, watch} from "vue";

const props = defineProps({
  name: {type: String},
  customClass: {type: String},
  width: {
    type: [String, Number],
    default: "3rem",
  },
  height: {
    type: [String, Number],
    default: "3rem",
  },
});

const svgProps = reactive({
  width: "",
  height: "",
  customClass: "",
  name: "",
});

watch(
    () => props,
    () => {
      // 判断给单位没有
      svgProps.width = /^[\d|.]*$/g.test(props.width) ? props.width + "rem" : props.width;
      svgProps.height = /^[\d|.]*$/g.test(props.height) ? props.height + "rem" : props.height;
      svgProps.name = props.name ? `#icon-${props.name}` : "#icon";
      svgProps.customClass = props.customClass ? "svg-icon " + props.customClass : "svg-icon";
    },
    {
      immediate: true,
      deep: true,
    }
);
</script>
<template>
  <svg
      :class="svgProps.customClass"
      :style="`width: ${svgProps.width};height: ${svgProps.width || svgProps.height};`"
      aria-hidden="true"
  >
    <use :xlink:href="svgProps.name"></use>
  </svg>
</template>

<style scoped>
.svg-icon {
  vertical-align: -0.15rem;
  fill: currentColor;
  overflow: hidden;
}
</style>
